<template>
  <div>
    <div class="weui-search-bar">
      <div class="weui-search-bar__form">
        <div class="weui-search-bar__box">
          <icon class="weui-icon-search_in-box" type="search" size="14"></icon>
          <input type="text" class="weui-search-bar__input" placeholder="搜索" v-model="inputVal" :focus="inputShowed" @input="inputTyping" />
          <div class="weui-icon-clear" v-if="inputVal.length > 0" @click="clearInput">
            <icon type="clear" size="14"></icon>
          </div>
        </div>
        <label class="weui-search-bar__label" :hidden="inputShowed" @click="showInput">
          <icon class="weui-icon-search" type="search" size="14"></icon>
          <div class="weui-search-bar__text">搜索</div>
        </label>
      </div>
      <div class="weui-search-bar__cancel-btn" :hidden="!inputShowed" @click="hideInput">搜索</div>
    </div>
  </div>
</template>

<script>
export default {
  props: {

  },
  data () {
    return {
      inputShowed: false,
      inputVal: ''
    }
  },
  components: {
  },
  methods: {
    showInput () {
      this.inputShowed = true
    },
    hideInput () {
      let data = this.inputVal
      this.inputShowed = false
      this.inputVal = ''
      this.$emit('search', data)
    },
    clearInput () {
      this.inputVal = ''
    },
    inputTyping (e) {
      this.inputVal = e.mp.detail.value
    }
  },
  created () {

  }
}
</script>

<style>

</style>
